<template>
    <div class="addPatient">
        <navBar :titleName="titleName"></navBar>
        <nut-textinput
                :clearBtn="false"
                label="就诊人"
                :hasBorder="false"
                placeholder="姓名"
                v-model = "patientData.patientName"
        />
        <nut-textinput
                :clearBtn="false"
                label="联系方式"
                :hasBorder="false"
                placeholder="手机号码"
                v-model="patientData.tel"
        />

        <mycell
                title="性别"
                :desc="gender"
                :showIcon="true"
                :isLink="true"
                @myClickHandler="myClickFunc">
        </mycell>
        <nut-textinput
                :clearBtn="false"
                label="联系地址"
                :hasBorder="false"
                placeholder="地址"
                v-model="patientData.addr"
        />
        <mycell
                title="学历"
                :desc="eduLevel"
                :showIcon="true"
                :isLink="true"
                @myClickHandler="myClickLeave">
        </mycell>
        <mycell
                title="民族"
                :desc="nation"
                :showIcon="true"
                :isLink="true"
                @myClickHandler="myClickNotion">
        </mycell>

        <mycell
                title="生日"
                :desc="birthday"
                :showIcon="true"
                :isLink="true"
                startDate="1900-01-01"
                :defaultValue="patientData.birth"
                @myClickHandler="myClickBirth">
        </mycell>

        <nut-datepicker
                :is-visible="isBirthVisible"
                type="date"
                title="请选择日期"
                :is-show-chinese="false"
                @close="switchPicker('isBirthVisible')"
                @choose="setChooseBirthValue"
        >
        </nut-datepicker>

        <mycell
                title="证件类型"
                :desc="cardType"
                :showIcon="true"
                :isLink="true"
                @myClickHandler="myClickCardType">
        </mycell>
        <nut-textinput
                :clearBtn="false"
                label="证件号码"
                :hasBorder="false"
                placeholder="请输入证件号码"
                v-model="patientData.idcard"
        />
        <nut-textinput
                :clearBtn="false"
                label="邮箱"
                :hasBorder="false"
                placeholder="请输入电子邮箱"
                v-model="patientData.email"
        />
        <myInput style="margin-top: 10px;"
                 label="过敏史"
                 height="100px"
                 :hasBorder="false"
                 placeholder="请输入"
                 v-model="patientData.allergry"
        />

        <myInput style="margin-top: 10px;"
                 label="既往史"
                 height="100px"
                 :hasBorder="false"
                 placeholder="请输入"
                 v-model="patientData.hisRecored"
        />
        <nut-actionsheet :is-visible="isVisible"
                         @close="switchActionSheet('isVisible')"
                         :menu-items="menuItems"
                         @choose="chooseItem"
        ></nut-actionsheet>
        <!--<nut-button @click="addFunc" block shape="circle" style="background-color: #4552ea;border-radius: 5px;width: 95%;
    height: 48px;font-size: 17px;margin-top: 40px;">
            确&nbsp;&nbsp;&nbsp;定
        </nut-button>-->
    </div>

</template>

<script>
    /* eslint-disable no-console */

    import mycell from '@/components/common/my-cell.vue'
    import myInput from '@/components/common/my-textarea.vue'
    import navBar from '@/components/common/navBar.vue'

    export default {
        name: "detailPatient",
        components: {
            navBar,
            myInput,
            mycell
        },
        data() {
            return {
                patientData:this.$route.params.pateient,
                flag: 0,
                today:"",
                titleName: '病人详情',
                patientName: "",
                phone: "",
                gender: "男",
                genderValue: 1,
                address: "",
                eduLevel: "请选择",
                eduLevelValue: "",
                nation: "汉族",
                cardType: "身份证",
                cardNo: "",
                email: "",
                allergry: "",
                hisRecored: "",
                birthday: "请选择日期",
                isVisible: false,
                isBirthVisible: false,
                menuItems: []
            }
        },
        created(){
            let d = new Date();
            this.today = d.Format("yyyy-MM-dd");
            setTimeout(function () {
                let len = document.getElementsByTagName("input").length;
                for (let i = 0; i < len; i++) {
                    document.getElementsByTagName("input")[i].style.textAlign = "right";
                }
            },100);
        },
        methods: {
            addFunc: function () {

                // if (!this.patientName) {
                //     this.$toast.text("请输入病人姓名");
                //     return;
                // }
                //
                // if (!(/^1(3|4|5|7|8)\d{9}$/.test(this.phone))) {
                //     this.$toast.text("输入的手机号不正确");
                //     return;
                // }
                //
                // if (!this.address) {
                //     this.$toast.text("请输入病人联系地址");
                //     return;
                // }
                // if (!this.birthday) {
                //     this.$toast.text("请输入病人生日信息");
                //     return;
                // }
                // if (!this.eduLevelValue) {
                //     this.$toast.text("请选择学历信息");
                //     return;
                // }
                //
                // //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
                // let regID = /(^\d{15}$)|(^\d{17}(\d|X)$)/;
                // if (!regID.test(this.cardNo)) {
                //     this.$toast.text("请输入合法的身份证号");
                //     return;
                // }
                //
                // let regEmail = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/;
                // //正则表达式
                // if (!(regEmail.test(this.email))) {
                //     this.$toast.text("输入的邮箱地址不正确");
                //     return;
                // }
                //
                //
                // console.log({
                //     "addr":this.address,
                //     "allergry":this.allergry,
                //     "birth":this.birthday,
                //     "cardType":0,
                //     "eduLevel":this.eduLevel,
                //     "email":this.email,
                //     "hisRecored":this.hisRecored,
                //     "idcard":this.cardNo,
                //     "isDelete":0,
                //     "nation":this.nation,
                //     "patientGender":this.genderValue,
                //     "patientName":this.patientName,
                //     "tel":this.phone
                // });
                //
                // this.API.POST(this.ApiUrl.POST_ADD_PATIENT,{
                //     "addr":this.address,
                //     "allergry":this.allergry,
                //     "birth":this.birthday,
                //     "cardType":0,
                //     "eduLevel":this.eduLevel,
                //     "email":this.email,
                //     "hisRecored":this.hisRecored,
                //     "idcard":this.cardNo,
                //     "isDelete":0,
                //     "nation":this.nation,
                //     "patientGender":this.genderValue,
                //     "patientName":this.patientName,
                //     "tel":this.phone
                // }).then(({data}) => {
                //     console.log("patient------", data);
                //     if (data.code === 1200){
                //         this.$toast.text("添加病人信息完成");
                //         this.$store.state.patient = data.data;
                //         this.$router.go(-1);//返回上一层
                //     }
                // }).catch(err => {
                //     console.log("addPatient::err------", err);
                //     this.$toast.text("添加病人信息失败，请重试");
                // });
                this.$router.go(-1);
            },
            myClickFunc() {
                this.flag = 1;
                console.log("------------------myClickFunc------------------" + this.flag);
                this.menuItems = [
                    {'name': '男', 'value': '0'},
                    {'name': '女', 'value': '1'}
                ];
                this.isVisible = true;
                this.$store.state.patient = {"patientId": 1, "pname": "张三"}
            },
            myClickLeave() {
                this.flag = 2;
                console.log("------------------myClickFunc------------------" + this.flag);
                this.menuItems = [
                    {'name': '学龄前', 'value': '0'},
                    {'name': '小学', 'value': '1'},
                    {'name': '初中', 'value': '2'},
                    {'name': '高中', 'value': '3'},
                    {'name': '中专', 'value': '4'},
                    {'name': '大专', 'value': '5'},
                    {'name': '本科', 'value': '6'},
                    {'name': '硕士', 'value': '7'},
                    {'name': '博士', 'value': '8'},
                    {'name': '其他', 'value': '9'}
                ];
                this.isVisible = true;
            },
            myClickNotion() {
                this.flag = 3;
                console.log("------------------myClickFunc------------------" + this.flag);
                this.menuItems = [
                    {name:'汉族'},
                    {name:'蒙古族'},
                    {name:'回族'},
                    {name:'藏族'},
                    {name:'维吾尔族'},
                    {name:'苗族'},
                    {name:'彝族'},
                    {name:'壮族'},
                    {name:'布依族'},
                    {name:'朝鲜族'},
                    {name:'满族'},
                    {name:'侗族'},
                    {name:'瑶族'},
                    {name:'白族'},
                    {name:'土家族'},
                    {name:'哈尼族'},
                    {name:'哈萨克族'},
                    {name:'傣族'},
                    {name:'黎族'},
                    {name:'傈僳族'},
                    {name:'佤族'},
                    {name:'畲族'},
                    {name:'高山族'},
                    {name:'拉祜族'},
                    {name:'水族'},
                    {name:'东乡族'},
                    {name:'纳西族'},
                    {name:'景颇族'},
                    {name:'柯尔克孜族'},
                    {name:'土族'},
                    {name:'达翰尔族'},
                    {name:'么佬族'},
                    {name:'羌族'},
                    {name:'布朗族'},
                    {name:'撒拉族'},
                    {name:'毛南族'},
                    {name:'仡佬族'},
                    {name:'锡伯族'},
                    {name:'阿昌族'},
                    {name:'普米族'},
                    {name:'塔吉克族'},
                    {name:'怒族'},
                    {name:'乌孜别克族'},
                    {name:'俄罗斯族'},
                    {name:'鄂温克族'},
                    {name:'德昂族'},
                    {name:'保安族'},
                    {name:'裕固族'},
                    {name:'京族'},
                    {name:'塔塔尔族'},
                    {name:'独龙族'},
                    {name:'鄂伦春族'},
                    {name:'赫哲族'},
                    {name:'门巴族'},
                    {name:'珞巴族'},
                    {name:'基诺族'}
                ];
                this.isVisible = true;
            },
            myClickBirth() {
                this.isBirthVisible = true;
            },
            myClickCardType() {
                this.flag = 4;
                console.log("------------------myClickFunc------------------" + this.flag);
                this.menuItems = [
                    {'name': '身份证', 'value': '0'},
                    {'name': '港澳通行证', 'value': '1'},
                    {'name': '护照', 'value': '2'},
                    {'name': '士兵证', 'value': '3'},
                    {'name': '军官证', 'value': '4'}
                ];
                this.isVisible = true;
            },
            chooseItem(itemParams) {
                console.log("------------------about chooseItem------------------");
                //性别
                if (this.flag == 1) {
                    this.gender = itemParams.name;
                    this.genderValue = itemParams.value;
                }
                //学历
                else if (this.flag == 2) {
                    this.eduLevel = itemParams.name;
                    this.eduLevelValue = itemParams.name;
                }
                //民族
                else if (this.flag == 3) {
                    this.nation = itemParams.name;
                }
                //证件类型
                else if (this.flag == 4) {
                    this.cardType = itemParams.name;
                }
                console.log("------------------about chooseItem------------------");
            },
            switchActionSheet(param) {
                this[`${param}`] = !this[`${param}`];
            },
            switchPicker(param) {
                this[`${param}`] = !this[`${param}`];
            },
            setChooseBirthValue(param) {
                this.birthday = param[3];
            },
        }
    }
</script>

<style scoped>
    .nut-textinput input {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        height: 40px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        font-size: 14px;
        box-sizing: border-box;
        border-radius: 0px !important;
        border-bottom: 0.5px solid #DDDFE6;
        text-align: end !important;
        background-color: '#FFFFFF';
        padding: 0 30px 0 10px;
    }

    .addPatient {
        background-color: #e6e6e6;
        margin-top: 41px;
        width: 100%;
        min-height: 626px;
    }

    .nut-textinput {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        position: relative;
        background-color: white !important;
        padding-left: 15px;
        border-bottom: 1px solid #DDDFE6;
        text-align: end !important;
    }

    .nut-textinput-label {
        width: 74px !important;
        text-align: -webkit-auto;
    }

    .nut-row:after {
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        content: '';
        min-height: 30px;
        padding-top: 6px;
    }

</style>